YWAMBB: A Voice for the Voiceless
A conceptual website design uplift for a non-profit in Germany, YWAM Bad Blankenburg.
Project Overview
Youth with a Mission Bad Blankenburg is a Christian non-profit dedicated to fighting injustice. Their site informs users of who they are and how to get involved.
After a thorough analysis, it was determined that this site could benefit from visual cohesion, a stronger call to action, and usability fixes.
------------------------------------
Understanding
What are the non-profit's goals and challenges?
(Survey with the non-profit)
Who are the users?
(User Surveys, User Interviews, Personas, and Journey Maps)
------------------------------------
Observing
What are the users pain points?
(Affinity Mapping)
Problem Statement:
Users need a way to immediately feel energized and welcome once entering the website and they need to find and confidently navigate through it, with no suspicions of legitimacy.
They need to feel comfortable and welcomed no matter their background, and to see the importance of learning, donating, and getting involved because the users want to be able to easily see what the organization is about, be inspired, and be able to make a difference in a cause they believe in.
They need to feel comfortable and welcomed no matter their background, and to see the importance of learning, donating, and getting involved because the users want to be able to easily see what the organization is about, be inspired, and be able to make a difference in a cause they believe in.
------------------------------------
Ideation
(Sitemaps, Sketches and Wireframes)
Low Fidelity Wireframes provide the concepts and allow for planning.
High Fidelity Wireframes turn concepts into reality, ready for testing and iterations.
------------------------------------
Usability Testing
(Prototyping, User Testing, Affinity Mapping, Rainbow Spreadsheets, and Wireframe Iterations)
5 focus points came from the tests:
Clear up the mission statement, make information read/skim friendly, take away abbreviations for easier understanding, make elements intuitive, and make the donation form inclusive.
------------------------------------
UI and Breakpoints
(Designing for breakpoints and UI Documentation)
Taking a mobile-first approach, I expanded the designs into tablet and desktop breakpoints.
------------------------------------
Check out the Prototypes!
Prototypes below are in mobile, tablet, and desktop breakpoints.
